<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Vue</title>
  <script src="js/vue.min.js"></script>
</head>

<body>
  <div id="app">
  </div>
  <script type="text/x-template" id="header-view-template">
    <div>我是另一个组件, {{title}}</div>
  </script>
  <script>
    const app = Vue.createApp({
      template: `
        <todo-item />
        <com-demo />
      `
    })

    // 全局组件
    app.component('todo-item', {
      template: `this is a todo`
    })

    app.component('com-demo', {
      template: "#header-view-template",
      data () {
        return {
          title: '组件测试'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

</html>